<template>
  <div>
    <el-form>
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>预览 <span style="font-size:12px;">（注：pc端生成预览链接,点击“打开”，打开页面进行预览；手机端点击生成二维码，扫描预览。）</span></h4>
            <el-form-item label="预览类型">
              <el-radio-group v-model="previewInfo.terminalType">
                <el-radio label="1">PC端</el-radio>
                <el-radio label="2">手机端</el-radio>
              </el-radio-group>
              <el-button v-if="previewInfo.terminalType === '2'" type="primary" size="small" style="margin-left:20px" @click="handleCreateUrl(1)">预览</el-button>
            </el-form-item>
            <el-form-item label="生成类型">
              <el-radio-group v-model="previewInfo.linkType">
                <el-radio label="1">普通页面</el-radio>
                <el-radio label="2">大图详情页</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="预览链接" v-if="previewInfo.terminalType === '1'">
              <el-input v-model="previewUrl" style="width:400px;margin-right:30px;" placeholder="生成链接"></el-input>
              <el-button type="primary" @click="handleCreateUrl(1)">生成链接</el-button>
              <el-button type="primary" @click="handleOpenWidow">打开</el-button>
            </el-form-item>
        </div>
      </div>
      <div class="detail-info" style="margin-top: 50px">
        <div class="form-item">
          <h4>生成 <span style="font-size:12px;">（注：生成链接，“复制”即可）</span></h4>
            <el-form-item label="生成类型">
              <el-radio-group v-model="createInfo.linkType">
                <el-radio label="1">普通页面</el-radio>
                <el-radio label="2">大图详情页</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生成链接">
              <el-input v-model="createUrl" style="width:400px;margin-right:30px;" placeholder="生成链接"></el-input>
              <el-button type="primary" @click="handleCreateUrl(2)">生成链接</el-button>
            </el-form-item>
        </div>
      </div>
      <div class="detail-info" style="margin-top: 50px" v-loading="uploadLoading">
        <div class="form-item">
          <quill-editor ref="myTextEditor"
            v-model="content"
            :config="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            @change="onEditorChange($event)"
            >
          </quill-editor>
        </div>
      </div>
    </el-form>
    <el-dialog title="二维码" :visible.sync="QRCodeDialog" size="tiny" custom-class="QRCodeDialog" :show-close="false">
      <img :src="QRCodeUrl" class="avatar">
    </el-dialog>
  </div>
</template>
<script>
  import { hdljpz } from '../../config/proxy.js'
  export default {
    data () {
      return {
        previewInfo: {
          terminalType: '1', // 预览类型
          linkType: '1' // 预览生成类型
        },
        previewUrl: '', // 预览链接
        createInfo: {
          linkType: '1', // 生成类型
          terminalType: '1'
        },
        // createDisabled: false,
        openDisabled: false,
        createUrl: '', // 生成链接
        name: 'vue-quill-editor',
        content: '',
        text: '',
        editorOption: {
        // something config
        },
        QRCodeDialog: false,
        url: '',
        QRCodeUrl: '',
        uploadLoading: false, // 上传加载
        openFlag: false // 是否可以打开
      }
    },
    // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur (editor) { // 上传
        // console.log('editor blur!', editor)
        // console.log(this.content)
        // this.uploadLoading = true
        // var _data = {
        //   // imgStr: this.content.substring(this.content.indexOf(',') + 1, this.content.indexOf('">')),
        //   imgStr: this.content
        // }
        // console.log(_data)
        // hdljpz.ue.upload(_data, (res) => {
        //   console.log(res)
        //   if (res.message === 'ok') {
        //     this.uploadLoading = true
        //   } else {
        //     this.message(res.message, 'error')
        //     this.uploadLoading = false
        //   }
        // })
      },
      onEditorFocus (editor) {
        // console.log('editor focus!', editor)
      },
      onEditorReady (editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange ({ editor, html, text }) {
        console.log(text)
        // this.text = text
        this.content = html.replace(/"/g, "'")
        console.log(this.content)
      },
      handleCreateUrl (type) { // 生成url
        if (this.content === '') {
          this.message('请在编辑器内输入文字或上传图片', 'error')
        } else {
          var _data = type === 1 ? this.previewInfo : this.createInfo
          console.log(_data)
          _data.content = this.content
          _data.createUser = this.userName
          _data.branchId = this.branchId
          hdljpz.ue.create(_data, (res) => {
            console.log(res)
            if (res.message === 'ok') {
              if (type === 1) {
                if (_data.terminalType === '1') {
                  this.previewUrl = res.content.ueLink
                  this.openFlag = true
                } else {
                  this.QRCodeDialog = true
                  this.QRCodeUrl = res.content.ueLink
                }
              } else {
                this.createUrl = res.content.ueLink
              }
            } else {
              this.message(res.message, 'error')
              this.openFlag = false
            }
          })
        }
      },
      handleOpenWidow () {
        // window.location.href = this.previewUrl
        if (this.openFlag === true) {
          window.open(this.previewUrl)
        } else {
          this.message('请在编辑器内输入文字或上传图片，并生成链接后再点击打开', 'error')
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
    // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
    computed: {
      editor () {
        return this.$refs.myTextEditor.quillEditor
      },
      userName: function () {
        if (!this.$store.state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return this.$store.state.user.info.user_name
      },
      userId: function () {
        return this.$store.state.user.info.roleid
      },
      branchName: function () {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function () {
        return this.$store.state.user.info.branchId
      },
      deptName: function () {
        return this.$store.state.user.info.parOrgName
      },
      deptId: function () {
        return this.$store.state.user.info.or_org_id
      }
    },
    mounted () {
      // you can use current editor object to do something(editor methods)
      // console.log('this is my editor', this.editor)
      // this.editor to do something...
    }
  }
</script>
<style>
.form-item h4{
  width: auto
}
.QRCodeDialog{
  width: 15%
}
.QRCodeDialog .el-dialog__header {
  text-align: center;
  margin-bottom:20px
}
</style>

